<template>
  <div>
    <!-- 搜索 -->
    <el-form
      :inline="true"
      :model="formInline"
      ref="formInline"
      class="demo-form-inline"
    >
      <el-form-item label="商品名称">
        <el-input
          v-model="formInline.user"
          placeholder="请输入至少两个字"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button class="black" type="primary" @click="onSubmit"
          >搜索</el-button
        >

        <el-button
          class="red"
          :type="kqsca == 0 ? 'warning' : 'danger'"
          @click="kqsc"
          >{{ kqsca == 0 ? "开启删除" : "关闭删除" }}
        </el-button>
        <el-button class="black" v-if="kqsca == 1" type="primary" @click="qx"
          >全选</el-button
        >

        <el-button class="red" v-if="kqsca == 1" type="danger" @click="qdel"
          >全部删除</el-button
        >
      </el-form-item>

      <el-divider></el-divider>

      <div class="cmdlist">
        <div class="cmd" v-for="value in lists()" :key="value.pid">
          <!-- 传商品id跳转到修改商品页 -->
          <p class="juedui">
            <el-button
              v-if="kqsca == 1"
              size="mini"
              type="danger"
              @click="del(value.pid)"
              >删除</el-button
            >
            <input
              type="checkbox"
              v-if="kqsca == 1"
              v-model="typelist"
              :value="value"
            />
          </p>

          <img :src="value.cover" alt="" @click="JumpProduct(value.pid)" />
          <p>{{ value.title }}</p>
          <el-tag type="danger" color="#fff">
            {{ value.type }}
          </el-tag>

          <b>
            <span>{{ value.price }}</span>

            <p>
              <el-button
                @click="sj(value)"
                size="mini"
                :type="value.shelves == 1 ? 'success' : ''"
                :autofocus="true"
                >上架
              </el-button>
              <el-button
                @click="xj(value)"
                size="mini"
                :type="value.shelves == 1 ? '' : 'info'"
                >下架</el-button
              >
            </p>
          </b>
          <p class="xxz">
            <span class="xz"
              ><i class="el-icon-view"></i> {{ suiji - -value.allCount }}</span
            >
            <span class="xz"
              >月销售: {{ parseInt(value.allCount / suiji) - -suiji }}</span
            >
            <span class="xz">库存: {{ value.allCount }}</span>
          </p>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      typelist: [],
      dataList: [],
      formInline: {
        user: "",
        region: "",
      },
      suiji: "",
      kqsca: false,
      qxa: false,
    };
  },
  methods: {
    //全选
    qx() {
      this.qxa = !this.qxa;
      if (this.qxa) {
        this.typelist = this.dataList;
      } else {
        this.typelist = [];
      }
    },
    //全部删除
    qdel() {
      // console.log(this.typelist)
      // this.typelist.forEach(item => console.log({ pid: item }))
      this.typelist.forEach((item) => {
        return this.$http.commidityApi
          .delete({ pid: item.pid })
          .then((res) => this.cc());
      });
      this.typelist = [];
    },

    //开启删除
    kqsc() {
      // console.log(111)
      this.kqsca = !this.kqsca;
    },
    //删除
    del(id) {
      // console.log(id)
      let params = { pid: id };
      this.$http.commidityApi.delete(params).then((res) => {
        // console.log(res)
        if (res.data.code == 200) {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        }
        this.cc();
      });
    },

    //
    lists() {
      return this.dataList.filter((item) =>
        item.title.includes(this.formInline.user)
      );
    },
    onSubmit() {
      // console.log("submit!")
      // console.log(this.dataList.filter(item => item.title.includes(this.formInline.user)))
      // this.lists()
    },

    //跳转商品页
    JumpProduct(id) {
      this.$router.push(`/home/up-com/${id}`);
    },
    sj(value) {
      if (value.shelves == 1) return;
      value.shelves = 1;
      // console.log(value)
      let params = { ...value };
      this.$http.commidityApi.update(params).then((res) => {
        // console.log('res', res)
        if (res.data.code == 200) {
          this.$message({
            type: "success",
            message: "上架成功!",
          });
        }
      });
    },
    xj(value) {
      if (value.shelves == 0) return;

      this.$confirm("是否下架商品?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          value.shelves = 0;
          let params = { ...value };
          this.$http.commidityApi.update(params).then((res) => {
            // console.log('res', res)
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: "下架成功!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消下架",
          });
        });
    },

    //
    cc() {
      let params = { page: 1, pagesize: 200 };
      this.$http.commidityApi.queryAll(params).then((res) => {
        // console.log(res)
        this.dataList = res.data.data;
      });
      this.suiji = parseInt(Math.random() * 1500);
    },
  },
  mounted() {
    this.cc();
  },
};
</script>

<style lang="scss" scoped>
.cmdlist {
  background-color: #ddd;
  min-width: 1000px;

  display: flex;
  flex-wrap: wrap;

  > .cmd {
    background-color: #fff;
    border: 1px solid #ccc;
    width: 235px;
    padding: 10px;
    cursor: pointer;
    margin: 0 10px 20px 0;
    position: relative;

    .juedui {
      position: absolute;
      left: 0;
      top: 0;
    }

    &:hover {
      transform: scale(1.03);
    }

    > img {
      height: 250px;
    }

    > p {
      margin: 10px 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    > b {
      display: flex;
      justify-content: space-between;
      align-items: center;

      > span {
        font-size: 20px;
        color: red;
        margin-left: 10px;
      }
    }
  }
}

.xxz {
  display: flex;
  justify-content: space-between;
}

.xz {
  color: #777;
  font-size: 12px;
  // flex: 1;
}
.black {
  background: #010101 !important;
  border-color: #010101 !important;
  color: #fff;
}
.red {
  background: #9c1d12 !important;
  border-color: #9c1d12 !important;
  color: #fff;
}
</style>
